<template>
    <div>
        <div class="header">
            <a-button type="primary" @click="add_btn"> 添加</a-button>
        </div>
        <a-table :dataSource="userList" :columns="columns">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'operation'">


                    <a-button type="link" @click="edit_table(record)"> 编辑</a-button>
                    <a-popconfirm title="不在想一想吗?" ok-text="Yes" cancel-text="No" @confirm="delete_confirm(record.user_id)"
                        @cancel="cancel">
                        <a-button type="link"> 删除</a-button>
                    </a-popconfirm>
                </template>
            </template>
        </a-table>

        <!-- 添加弹框 -->
        <a-modal ref="modalRef" v-model:visible="add_visible" :wrap-style="{ overflow: 'hidden' }">

            <a-form :layout="'vertical'" :model="formState" name="basic" :label-col="{ span: 8 }"
                :wrapper-col="{ span: 24 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">

                <a-form-item label="姓名" name="realname" :rules="[{ required: true, message: '请输入姓名' }]">
                    <a-input v-model:value="formState.realname" />
                </a-form-item>
                <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号' }]">
                    <a-input v-model:value="formState.phone" />
                </a-form-item>

                <a-form-item label="角色类型" name="role_id" :rules="[{ required: true, message: '请选择角色类型' }]">
                    <a-select v-model:value="formState.role_id" :options="roleList"></a-select>

                </a-form-item>

                <a-form-item label="账号名称" name="username" :rules="[{ required: true, message: '请输入账号名称' }]">
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
                    <a-input-password v-model:value="formState.password" />
                </a-form-item>
                <a-form-item label="用户类型" name="user_type" :rules="[{ required: true, message: '请输入用户类型' }]">
                    <a-input v-model:value="formState.user_type" />
                </a-form-item>





                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit">添加</a-button>
                </a-form-item>
            </a-form>


            <template #footer> </template>
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">添加菜单</div>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'   // cnpm i pinia --save  2.1.3  
import { corsApi } from '../../request/http'
import { message } from 'ant-design-vue'
const store = useCounterStore()
const { userList, roleList } = storeToRefs(store)  //  数据 
const { get_user_list, get_role_list } = store    //方法

interface FormState {
    username: string | number,
    phone: string | number,
    realname: string | number,
    password: string | number,
    user_type: number | string,
    role_id: string | number
}
onMounted(async () => {
    if (userList.value && userList.value.length == 0) {
        await get_user_list()
    }
    if (roleList.value && roleList.value.length == 0) {
        await get_role_list()
    }
    console.log(userList.value);
    console.log(roleList.value);

})
// 弹框
const add_visible = ref(false)
// 表单
const formState = reactive<FormState>({
    username: "",
    phone: "",
    realname: "",
    password: "",
    user_type: "",
    role_id: ""
});


const type = ref('add')
const add_btn = () => {
    type.value = 'add'
    add_visible.value = true
}
// 添加
const onFinish = async (values: any) => {
    console.log('Success:', values);
    console.log(formState);

    if (type.value === 'add') {
        const res = await corsApi('user_add', 'POST', formState)
        console.log(res);
        if (res.data.status === 1) {
            message.success('添加成功')
            add_visible.value = false
            await get_user_list()
        }
    } else if (type.value === 'edit') {
        const res = await corsApi('user_update', 'POST', formState)
        console.log(res);
        if (res.data.status === 1) {
            message.success('修改成功')
            add_visible.value = false
            await get_user_list()
        }
    }




};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

// 编辑
const edit_table = (row: any) => {
    console.log(row);
    type.value = 'edit'
    formState.username = row.username
    formState.phone = row.phone
    formState.realname = row.realname
    formState.password = row.password
    formState.user_type = row.user_type
    formState.role_id = row.role_id
    add_visible.value = true
}
// 删除
const delete_confirm = async (user_id: number | string) => {
    console.log(user_id);
    const res = await corsApi('user_delete', "POST", { user_id })
    console.log(res);
    if (res.data.status === 1) {
        message.success(res.data.message)

        await get_user_list()
    }

};
// 删除取消
const cancel = (e: MouseEvent) => {
    console.log(e);

};



const columns = ref([{
    title: "姓名",
    dataIndex: 'realname',
}, {
    title: "手机号",
    dataIndex: 'phone',
}, {
    title: "操作",
    dataIndex: 'operation',
}])

// 添加 
const add_user = async () => {

}
</script> 

<style scoped lang="scss">
.header {
    padding-bottom: 15px;
}
</style>